<template>
    <view class="product_home">
        <view class="left_icon" @click="xinagqingtu()"></view>
        <!-- 1、轮播图 -->
        <view class="swiper">
            <!--:current 动态绑定当前所在滑块的index(下标值)  -->
            <swiper :indicator-dots="false" :circular="true" :current="topSwiperIndex" @change="topSwiperTab"> 
                <swiper-item v-for="(item, index) in data.album" :key="index">
                    <view class="swiper-item">
                        <image :src="item"></image>
                    </view>
                </swiper-item>
            </swiper>
            <!-- 自定义指示点 -->
            <view class="dots">
                <text>{{topSwiperIndex+1}}/{{data.album.length}}</text>
            </view>
        </view>
        <!-- 2、信息详情 -->
        <view class="product_message">
            <view class="number">积分:{{data.price}}</view>
            <view class="font_item">{{data.name}}</view>
        </view>
        <!-- 3、产品详情 -->
        <view style="width: 100%;overflow: hidden;">
            <view v-html="dataDetails()"></view>
            <!-- <image src="../../static/fruits/intro.jpeg"></image> -->
        </view>
        <!-- 4、底部信息 -->
        <view class="product_bottom">
<!--            <view class="shop_car" @click="cartClick()">
                <image src="../../static/icon/gwc@3x.png"></image>
                <text>进入购物车</text>
            </view>
            <view class="shopping" @click="toAccountDemo">
                <text>直接购买</text>
            </view>
            <view class="join_shopCar" @click="addCart">
                <text>加入购物车</text>
            </view> -->
			<view class="shopping" @click="toExchange">
			    <text>立即兑换</text>
			</view>
        </view>
    </view>
</template>

<script>
    export default{
        props: {
          pagePath: null
        },
        data(){
            return{
                topSwiperIndex: 0,
                topSwiper:[
                    {
                        src: require('../../static/fruits/xiaotainong1.jpeg')
                    },
                    {
                        src: require('../../static/fruits/xiaotainong2.jpeg')
                    },
                    {
                        src: require('../../static/fruits/xiaotainong3.jpeg')
                    }
                ],
                page: 'productTab',
                showPage: false,
                containerHeight: 400,
                productId: null,
                data: {}
            }
        },
        onLoad(options) {
            this.productId = options.id;
            this._postProductDetai();
        },
        methods:{
            cartClick(){
                uni.navigateTo({
                    url: "/shop/pages/user/Tabindex?show=2"
                })
            },
            toAccountDemo() {
                uni.showLoading({
                    title: '加载中...'
                })
                this.$u.api.postCartAdd({
                    product_id: this.data.product.id,
                    nums: 1,
                      type: 2
                }).then(res => {
                    uni.navigateTo({
                        url: '../list/accountDemo?direct=1&id=' + res
                    })
                    uni.hideLoading()
                }).catch(err => {
                    uni.hideLoading()
                    uni.showToast({
                        title: '加载失败',
                        duration: 1500,
                        icon: 'none'
                    });
                    uni.hideLoading()
                })
            },
            dataDetails() {
                return this.data.intro
            },
            topSwiperTab(e){
                var that = this;
                this.topSwiperIndex = Number(e.target.current);/* e.target.current点击谁下目标就是谁的下标 */
            },
            changeTab(item){
                this.page = item.pagePath;
                uni.navigateTo({
                    url:this.page
                })
            },
            xinagqingtu(){
                uni.navigateBack({
                    delta: 1
                })
            },
			toExchange(){
				this.$u.api.postExchange({
				    product_id: this.data.id,
				    nums: 1,
				}).then(res => {
				    uni.hideLoading()
				    uni.showToast({
				        title: '换购成功',
				        duration: 2000
				    });
					setTimeout(()=>{
						this.xinagqingtu()
					},2000)
				}).catch(err => {
					console.error(err)
				    uni.hideLoading()
					
					// uni.showModal({
					// 	title: '提示',
					// 	content: err.msg,
					// 	success: function (res) {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
					
				 //    uni.showToast({
				 //        title: err.msg,
				 //        duration: 25000,
				 //        icon: 'none'
				 //    });
				})
			},
            addCart() {
                uni.showLoading({
                    title: '正在加入购物车'
                })
                this.$u.api.postCartAdd({
                    product_id: this.data.product.id,
                    nums: 1,
                }).then(res => {
                    uni.hideLoading()
                    uni.showToast({
                        title: '已加入购物车',
                        duration: 1500
                    });
                }).catch(err => {
                    uni.hideLoading()
                    uni.showToast({
                        title: '加入失败',
                        duration: 1500,
                        icon: 'none'
                    });
                })
            },
            // 商品详情API
            _postProductDetai() {
                this.$u.api.postProductDetai({
                    id: this.productId,
                    code: '999'
                }).then(res => {
                    this.data = res;
                }).catch(err => {
                    
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .product_home{
        background: #FFFFFF;
        position: relative;
        padding-bottom: calc(var(--window-bottom) + 110px); //内容区域距离底部的距离
    }
    .left_icon{
        display: flex;
        position: fixed;
        width: 70rpx;
        height: 70rpx;
        border-radius:50%;
        left: 30rpx;
        z-index: 999;
        top: 60rpx;
        align-items: center;
        justify-content: center; 
        background: url('../../static/icon/more@4x.png') no-repeat center center;
        background-color: rgba(255,255,255,0.5); //背景颜色的透明度rgba函数
        background-size:65%;
    }
    swiper{
        width: 100%;
        height: 750rpx;
        background-color: #d3d3d3;
        position: relative;
        swiper-item{
            image{
                width: 100%;
                height: 750rpx;
                display: block; /* 转换成块级元素*/
            }
        }
    }
    .dots{
        width: 100rpx;
        border-radius: 20rpx;
        background-color:#000000;
        position: relative;;
        margin-top: -60rpx;
        //transform: translateX(50%);/* 左右居中 */
        margin-left: 300rpx;
        text-align: center;
        color: #fffefe;
        font-size: 30rpx;
    }
    
    .product_message{
        width: 750rpx;
        height: 244rpx;
        background-color: #ffffff;
        margin-top: 50rpx;
        padding-left: 25rpx;
        .font_item{
            font-size: 36rpx;
            position: absolute;
            margin-top: 30rpx;
            font-weight:bold;
        }
        .number{
            font-size: 40rpx;
            color: #ff4200;
        }
    }
    
    .product_bottom{
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 15rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // height: 130rpx;
        // 计算如iPhoneX等手机底部返回横条的安全距离
        padding-top: 10rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        .shop_car{
            display: flex;
            flex-wrap: wrap; 
            box-sizing: border-box;
            // height: 100%;
            justify-content: center;
            image{
                width: 43rpx;
                height: 41rpx;
            }
            text{
                width: 100%;
                font-size: 20rpx;
                color: #ff4200;
                text-align: center;
                margin-top: 10rpx;
            }
        }
        .shopping{
            width: 250rpx;
            height: 78rpx;
            background-color: #ffa800;
            border-radius: 39rpx;
            text-align: center;
            line-height: 78rpx;
            text{
                font-size: 28rpx;
                color: #ffffff;
            }
        }
        .join_shopCar{
            width: 250rpx;
            height: 78rpx;
            background-color: #ff4200;
            border-radius: 39rpx;
            text-align: center;
            line-height: 78rpx;
            text{
                font-size: 28rpx;
                color: #ffffff;
            }
        }
    }
</style>
